<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>&#x76d2;&#x5b50;&#x6a21;&#x578b;</title>
        <style>
/* From extension vscode.github */
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.vscode-dark img[src$=\#gh-light-mode-only],
.vscode-light img[src$=\#gh-dark-mode-only] {
	display: none;
}

/* From extension ms-toolsai.jupyter */
/* These classnames are inherited from bootstrap, but are present in most notebook renderers */

.alert {
    width: auto;
    padding: 1em;
    margin-top: 1em;
    margin-bottom: 1em;
}
.alert > *:last-child {
    margin-bottom: 0;
}
#preview > .alert:last-child {
    /* Prevent this being set to zero by the default notebook stylesheet */
    padding-bottom: 1em;
}

.alert-success {
    /* Note there is no suitable color available, so we just copy "info" */
    background-color: var(--theme-info-background);
    color: var(--theme-info-foreground);
}
.alert-info {
    background-color: var(--theme-info-background);
    color: var(--theme-info-foreground);
}
.alert-warning {
    background-color: var(--theme-warning-background);
    color: var(--theme-warning-foreground);
}
.alert-danger {
    background-color: var(--theme-error-background);
    color: var(--theme-error-foreground);
}

</style>
        
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Microsoft/vscode/extensions/markdown-language-features/media/markdown.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Microsoft/vscode/extensions/markdown-language-features/media/highlight.css">
<style>
            body {
                font-family: -apple-system, BlinkMacSystemFont, 'Segoe WPC', 'Segoe UI', system-ui, 'Ubuntu', 'Droid Sans', sans-serif;
                font-size: 14px;
                line-height: 1.6;
            }
        </style>
        <style>
.task-list-item {
    list-style-type: none;
}

.task-list-item-checkbox {
    margin-left: -20px;
    vertical-align: middle;
    pointer-events: none;
}
</style>
        
    </head>
    <body class="vscode-body vscode-light">
        <h1 id="盒子模型">盒子模型</h1>
<pre><code>外边距:margin
    作用:用来设置元素与元素之间的间隔
    居中设置:margin:0px auto; 上下间隔是0px,水平居中
边框:boder
    作用:设置内容和边框之间的距离
    注意:内边距不会改变内容区域的大小 可以单独的设置上下左右的内边距
内容区域:
    作用:改变内容区域的大小
    设置宽和高即可以改变内容区域的大小
</code></pre>
<h1 id="css的定位学习">css的定位学习:</h1>
<pre><code>position
    相对定位:relative
            作用:相对元素原有位置移动指定的距离(相对自己原有的位置)
                可以使用top,left,right,bottom来进行设置
            注意:
                其他元素的位置不改变
    绝对定位:absolute
            作用:可以使元素参照界面或者相对父元素来进行移动
            注意:
                如果父级元素成为参照元素,必须使用相对定位属性
                默认情况下是以界面为基准进行移动.
    固定定位:fixed
            作用:将元素固定在界面的指定位置,不会随着滚动条的移动而改变位置.
    以上定位	都可以使用top,left,right,bottom来进行移动	
z-index:此属性是用来声明元素的显示级别的
</code></pre>

        
        
    </body>
    </html>